<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>

<button onclick="playGame(1)">开始游戏</button>
<button onclick="playGame(0)">暂定游戏</button>

<script>
    //获取canvas的id
    var canvas = document.getElementById('canvas');
    //设置canvas的宽高
    canvas.width = 400;
    canvas.height = 400;
    //设置canvas的边框线
    canvas.style.border = '1px solid #ccc';
    var ctx = canvas.getContext('2d');

    //定义相关变量
    //记录蛇运行的路径
    var map = [];
    //每个矩形的宽高
    var width = height = 8;
    //矩形刚开始的坐标
    var x = y = 8;
    var size = 8;
    //蛇身刚开始默认的长度
    var len = 10;
    //默认蛇向右运动
    var code = 2;
    //食物的坐标
    var randX = randY = 0;
    //定时器
    var timer;
    //开关
    var play = true;

    //设置游戏
    function setGame(){
        switch (code) {
            case 0:
                x -= size;
                break;
            case 1:
                y -= size;
                break;
            case 2:
                x += size;
                break;
            case 3:
                y += size;
                break;
        }

        //蛇身碰撞的限制
        for (var i=0; i<map.length; i++) {
            if (parseInt(map[i].x) === x && parseInt(map[i].y) === y) {
                alert('你输了');
                //刷新
                window.location.reload();
            }

            //判断投放的食物是否在自己身上
            if (parseInt(map[i].x) === randX && parseInt(map[i].y) === randY) {
                randFrog();//投放食物
            }
        }

        //出墙的限制,判断设置是否在canvas内部即可
        if (x > canvas.width || x < 0 || y > canvas.height || y < 0) {
            alert('你输了');
            //刷新
            window.location.reload();
        }

        //控制蛇身的长度
        if (map.length > len) {
            //shift()：删除数组里第一项并返回第一项的值
            var c1 = map.shift();
            ctx.clearRect(c1['x']-1, c1['y']-1, size+2, size+2);
        }

        // 记录蛇身每个矩形X,Y轴的位置
        map.push({
            'x': x,
            'y': y
        })

        //画矩形,即蛇身的矩形
        ctx.fillStyle = '#069';
        ctx.strokeStyle = '#069';
        ctx.fillRect(x,y,width, height);//开始画矩形

        //判断是否吃食物，如果吃食物，蛇身长度加1
        //当吃食物的时候，蛇的坐标与食物的坐标重合
        console.log("长度1");
        if (x === randX && y === randY ) {
            console.log("长度");
            len++;
            console.log("长度" + len);
            //重新投放食物
            randFrog();
        }
    }

    //获取键盘码，上下左右
    document.onkeydown = function (event) {
        //兼容浏览器
        var event = window.event || event;
        //获取键盘码
        var keyCode = event.keyCode - 37;
        //键盘方向：0向左  1向上  2向右  3向下
        /*
        * ==与 ===区别：
        * "=="表示只要值相等即可为真，
        * "==="则要求不仅值相等，而且也要求类型相同。
        * */
        if (code === 0 && keyCode !== 2) {
            code = keyCode;
            console.log(code);
        } else if (code === 1 && keyCode !== 3) {
            code = keyCode;
        } else if (code === 2 && keyCode !== 0) {
            code = keyCode;
        } else if (code === 3 && keyCode !== 1) {
            code = keyCode;
        }
    };

    //投放食物
    function randFrog() {
        //随机坐标
        randX = Math.ceil(Math.random() * 39) * 8;
        randY = Math.ceil(Math.random() * 39) * 8;
        //绘制食物小矩形
        ctx.fillStyle = '#000';
        ctx.strokeStyle = '#000';
        ctx.fillRect(randX, randY, size, size)
    }


    //开始游戏
    function playGame(i) {
        if (i && play) { //开始游戏
            //设置定时器
            timer = setInterval(setGame,200);
            play = false;
            //投放食物
            randFrog();
        } else {//暂定游戏
            play = true;
            //清空定时器
            clearInterval(timer);
            //清空食物小矩形
            ctx.clearRect(randX, randY, size, size);
        }
    }

</script>

</body>
</html>
